{% extends "base/base.html" %}
{% load i18n %}
{% block title %}{% trans 'Blog' %}{% endblock %}
{% comment %} Blog {% endcomment %}
{% block page-header %}{{ project_name }} - BLOG{% endblock %}
{% block content %}
    <!-- Start Blog -->
    <section class="blog blog1">
    <div class="container">
    <div class="row">
    <div class="span8">
        <article>
            <div class="img-polaroid">
                <a href="/blog/post/"><img src="{{ STATIC_URL }}images/extra/shopping-high-heels.jpg" /></a>
            </div>
            <div class="row">
                <div class="span1">
                    <div class="post-date">
                        <div class="day">11</div>
                        <div class="month">Jan</div>
                    </div>
                </div>
                <div class="span7">
                    <h3 class="blog-title"><a href="/blog/post/">This is a post with preview picture</a></h3>
                    <div class="article_meta">
                        <ul class="meta-list">
                            <li><a href=""><span class="icon-user"></span> Mithun Biswas</a></li>
                            <li><a href=""><span class="icon-tags"></span> Illustrations</a></li>
                            <li><a href=""><span class="icon-comments"></span> 15 comments</a></li>
                        </ul>
                    </div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor lacus ac justo varius in vehicula nibh mattis. Aenean ac diam metus. Aliquam tempor tincidunt pretium. Suspendisse bibendum, sapien venenatis vestibulum commodo, eros lectus iaculis magna, sit amet pellentesque ligula turpis a nibh.</p>
                    <p><a href="/blog/post/" class="btn btn-success">Read More <i class="icon-circle-arrow-right"></i></a></p>
                </div>
            </div>
        </article>
        <hr>
        <article>
            <div class="img-polaroid slider">
                <div id="myCarousel" class="carousel slide">
                    <!-- Carousel items -->
                    <div class="carousel-inner">
                        <div class="active item">
                            <img src="{{ STATIC_URL }}images/extra/nettle-tea.jpg" />
                        </div>
                        <div class="item">
                            <img src="{{ STATIC_URL }}images/extra/magic-landscape.jpg" />
                        </div>
                        <div class="item">
                            <img src="{{ STATIC_URL }}images/extra/shopping-high-heels.jpg" />
                        </div>
                    </div>
                    <!-- Carousel nav -->
                    <a class="carousel-control left" href="#myCarousel" data-slide="prev"><i class="icon-chevron-left"></i></a>
                    <a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="icon-chevron-right"></i></a>
                </div>
            </div>
            <div class="row">
                <div class="span1">
                    <div class="post-date">
                        <div class="day">12</div>
                        <div class="month">Jan</div>
                    </div>
                </div>
                <div class="span7">
                    <h3 class="blog-title"><a href="">This is a post with slideshow of pictures</a></h3>
                    <div class="article_meta">
                        <ul class="meta-list">
                            <li><a href=""><span class="icon-user"></span> Mithun Biswas</a></li>
                            <li><a href=""><span class="icon-tags"></span> Illustrations</a></li>
                            <li><a href=""><span class="icon-comments"></span> 5 comments</a></li>
                        </ul>
                    </div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor lacus ac justo varius in vehicula nibh mattis. Aenean ac diam metus. Aliquam tempor tincidunt pretium. Suspendisse bibendum, sapien venenatis vestibulum commodo, eros lectus iaculis magna, sit amet pellentesque ligula turpis a nibh.</p>
                    <p><a href="" class="btn btn-success">Read More <i class="icon-circle-arrow-right"></i></a></p>
                </div>
            </div>
        </article>
        <hr>
        <article>
            <div class="img-polaroid">
                <iframe src="http://player.vimeo.com/video/25708134?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>
            </div>
            <div class="row">
                <div class="span1">
                    <div class="post-date">
                        <div class="day">13</div>
                        <div class="month">Jan</div>
                    </div>
                </div>
                <div class="span7">
                    <h3 class="blog-title"><a href="">This is a post with responsive video</a></h3>
                    <div class="article_meta">
                        <ul class="meta-list">
                            <li><a href=""><span class="icon-user"></span> Mithun Biswas</a></li>
                            <li><a href=""><span class="icon-tags"></span> Illustrations</a></li>
                            <li><a href=""><span class="icon-comments"></span> 10 comments</a></li>
                        </ul>
                    </div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor lacus ac justo varius in vehicula nibh mattis. Aenean ac diam metus. Aliquam tempor tincidunt pretium. Suspendisse bibendum, sapien venenatis vestibulum commodo, eros lectus iaculis magna, sit amet pellentesque ligula turpis a nibh.</p>
                    <p><a href="" class="btn btn-success">Read More <i class="icon-circle-arrow-right"></i></a></p>
                </div>
            </div>
        </article>
        <hr>
        <div class="pagination">
            <ul>
                <li class="disabled"><a href="#">« Prev</a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">Next »</a></li>
            </ul>
        </div>
    </div>
    <div class="span4 sidebar">
        <div class="widget recent-post">
            <div class="divider1"><h5>Recent Blog Posts</h5></div>
            <ul>
                <li>
                    <div class="row">
                        <div class="span1">
                            <a href="#"><img src="{{ STATIC_URL }}images/round/magic-landscape.jpg" alt="" /></a>
                        </div>
                        <div class="recent-body">
                            <a href="">Erat nisl faucibus justo verit et quasi architecto beatae.</a><br>
                            <em><small>January 11, 2012 - 1:13 PM</small></em>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="row">
                        <div class="span1">
                            <a href="#"><img src="{{ STATIC_URL }}images/round/shopping-high-heels.jpg" alt=""></a>
                        </div>
                        <div class="recent-body">
                            <a href="">Ut semper porttitor ipsum, et cursus erat volutpat vitae.</a><br>
                            <em><small>January 12, 2012 - 1:13 PM</small></em>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="row">
                        <div class="span1">
                            <a href="#"><img src="{{ STATIC_URL }}images/round/nettle-tea.jpg" alt="" /></a>
                        </div>
                        <div class="recent-body">
                            <a href="">Mauris porttitor nisi sit amet felis porta congue.</a><br>
                            <em><small>January 13, 2012 - 1:13 PM</small></em>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="row">
                        <div class="span1">
                            <a href="#"><img src="{{ STATIC_URL }}images/round/girl-on-street.jpg" alt=""></a>
                        </div>
                        <div class="recent-body">
                            <a href="">Quisque ac felis felis, ornare sem. Proin ut nisi tortor.</a><br>
                            <em><small>January 14, 2012 - 1:13 PM</small></em>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="row">
                        <div class="span1">
                            <a href="#"><img src="{{ STATIC_URL }}images/round/girl-in-room.jpg" alt=""></a>
                        </div>
                        <div class="recent-body">
                            <a href="">Erat nisl faucibus justo verit et quasi architecto beatae.</a><br>
                            <em><small>January 15, 2012 - 1:13 PM</small></em>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="widget accordion-widget">
            <div class="divider1"><h5>Accordion Widget</h5></div>
            <div class="accordion" id="accordion2">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"><i class="icon-circle-arrow-down pull-right"></i> Nobember 2012</a>
                    </div>
                    <div id="collapseOne" class="accordion-body collapse in">
                        <div class="accordion-inner">
                            <ul class="disc">
                                <li><a href="index.html">Illustration A to Z</a></li>
                                <li><a href="#">Web Design technics</a></li>
                                <li><a href="#">3D Design</a></li>
                                <li><a href="#">HTML5 / CSS3</a></li>
                                <li><a href="#">UI design</a></li>
                                <li><a href="#">Uncategorized</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"><i class="icon-circle-arrow-right pull-right"></i> October 2012</a>
                    </div>
                    <div id="collapseTwo" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <ul class="disc">
                                <li><a href="index.html">Illustration A to Z</a></li>
                                <li><a href="#">Web Design technics</a></li>
                                <li><a href="#">3D Design</a></li>
                                <li><a href="#">HTML5 / CSS3</a></li>
                                <li><a href="#">UI design</a></li>
                                <li><a href="#">Uncategorized</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"><i class="icon-circle-arrow-right pull-right"></i> September 2012</a>
                    </div>
                    <div id="collapseThree" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <ul class="disc">
                                <li><a href="index.html">Illustration A to Z</a></li>
                                <li><a href="#">Web Design technics</a></li>
                                <li><a href="#">3D Design</a></li>
                                <li><a href="#">HTML5 / CSS3</a></li>
                                <li><a href="#">UI design</a></li>
                                <li><a href="#">Uncategorized</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour"><i class="icon-circle-arrow-right pull-right"></i> August 2012</a>
                    </div>
                    <div id="collapseFour" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <ul class="disc">
                                <li><a href="#">Illustration A to Z</a></li>
                                <li><a href="#">Web Design technics</a></li>
                                <li><a href="#">3D Design</a></li>
                                <li><a href="#">HTML5 / CSS3</a></li>
                                <li><a href="#">UI design</a></li>
                                <li><a href="#">Uncategorized</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    </section>
    <!-- End blog -->
{% endblock %}